<template>
    <div class="madp-data-subscription">
        <basic-container>
            <div class="madp-subscription-switch">
                <span>订阅报表 :</span>
                <el-switch v-model="dataSubscription.switch" @change="dataSubscriptionSwitchFn"></el-switch>
                <span class="madp-subscription-type">订阅后，员工可通过金融提醒/邮件查看客户数据</span>
            </div>
            <div class="madp-subscription-content" v-if="dataSubscription.switch">
                <el-row>
                    <el-col :span="12" class="madp-display">
                        <div class="madp-title">客户数据:</div>
                        <div>
                            <p v-for="(item, index) in dataSubscription.customerDataList" :key="index + 111">{{ item | customerDataListFilter }}</p>
                        </div>
                    </el-col>
                    <el-col :span="12" class="madp-display">
                        <div class="madp-title">客户群数据:</div>
                        <div>
                            <p v-for="(item, index) in dataSubscription.customerGroupData" :key="index + 222">
                                {{ item | customerGroupDataFilter }}
                            </p>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="madp-display">
                <div class="madp-title">推送数据:</div>
                <div>
                    <p v-for="(item, index) in dataSubscription.pushTime" :key="index + 333">
                        {{ item | pushTimeFilter }}
                    </p>
                </div>
            </div>
            <div class="madp-display">
                <div class="madp-title">接收员工:</div>
                <div>
                    <div class="madp-btn" v-if="dataSubscription.userIds.length + dataSubscription.deptIds.length > 12">
                        <el-button type="text" icon="el-icon-arrow-down" v-if="showBtn" @click="showBtnFn">显示全部</el-button>
                        <el-button type="text" icon="el-icon-arrow-up" v-if="!showBtn" @click="showBtnFn">收起</el-button>
                    </div>
                    <div class="madp-msg-more">
                        <el-tag class="madp-receiving-employees" :key="index" v-for="(employees, index) in showTags" :disable-transitions="false">
                            <div class="madp-employees">
                                <el-avatar class="madp-image" shape="square" :src="employees.url" icon="el-icon-user-solid"></el-avatar>
                                <span>{{ employees.name }}</span>
                            </div>
                        </el-tag>
                    </div>
                </div>
            </div>
            <div v-if="!dataSubscription.switch">
                <div class="madp-subscription-switch madp-subscription-switch-img">
                    <span>预览 :</span>
                    <el-image src="/images/financial-reminder.jpg"></el-image>
                </div>
            </div>
            <el-button v-if="permissions.cp_data_subscription_edit" class="madp-edit-btn" type="primary" icon="el-icon-edit" @click="modifyFn">修改</el-button>
        </basic-container>
        <el-dialog :close-on-click-modal="false" title="数据订阅" :visible.sync="dialogVisible" width="1000px" :before-close="modifyCloseFn" top="6vh">
            <data-subscription-modify ref="modifyMsg" @addStaffFn="addStaffFn" :selectDataSubscription="dataSubscription" />
            <span slot="footer" class="madp-dialog-footer">
                <el-button @click="modifyCloseFn">取消</el-button>
                <el-button type="primary" @click="modifySaveFn">确定</el-button>
            </span>
        </el-dialog>
        <add-staff
            v-if="showAddStaff"
            ref="addStaff"
            :showAddStaff="showAddStaff"
            :receivingEmployees="dataSubscription"
            @addStaffCloseFn="addStaffCloseFn"
            @addStaffconfirmFn="addStaffconfirmFn"
        ></add-staff>
    </div>
</template>

<script>
import { subscribeSave, dataSubscriptionSwitch, dataSubscriptionList } from '@/api/operation-manage/data-subscription';
import dataSubscriptionModify from '@/views/operation-manage/data-subscription/modify';
import addStaff from '@/components/wechat/add-staff';
import { mapGetters } from 'vuex';
export default {
    name: 'dataSubscription',
    components: {
        dataSubscriptionModify,
        addStaff,
    },
    data() {
        return {
            dialogVisible: false,
            showBtn: true, //true:展开 false收起
            dataSubscription: {
                switch: true, //订阅日报
                customerDataList: ['contactTotalContact'], //客户数数据
                customerGroupData: ['totalRoom', 'changeRoom', 'totalContact'], //客户群数据
                pushTime: ['daily', 'weekly', 'monthly'], //推送时间
                userIds: [], //接收员工
                deptIds: [],
            },
            //添加成员弹框
            showAddStaff: false,
            initData: {},
            showTags: [],
        };
    },
    filters: {
        customerDataListFilter(val) {
            switch (val) {
                case 'contactTotalContact':
                    return '客户总数';
                case 'contactChangeContact':
                    return '新增客户数';
                case 'contactLossContact':
                    return '流失客户数';
                case 'contactRealAddContact':
                    return '净增客户数';
                default:
                    break;
            }
        },
        customerGroupDataFilter(val) {
            switch (val) {
                case 'totalRoom':
                    return '客户群总数';
                case 'changeRoom':
                    return '新增客户群';
                case 'totalContact':
                    return '客户群客户总数';
                case 'changeContact':
                    return '客户群新增客户数';
                case 'lossContact':
                    return '客户群流失客户数';
                case 'RealAddContact':
                    return '客户群净增客户数';
                default:
                    break;
            }
        },
        pushTimeFilter(val) {
            switch (val) {
                case 'daily':
                    return '每天 09:00-10:00 推送昨日数据';
                case 'weekly':
                    return '每周一 09:00-10:00 推送上周数据';
                case 'monthly':
                    return '每月1号 09:00-10:00 推送上月数据';
                default:
                    break;
            }
        },
    },
    watch: {
        showBtn: {
            handler(val) {
                let arr1 = this.dataSubscription.userIds || [];
                let arr2 = this.dataSubscription.deptIds || [];
                let arr = [...arr2, ...arr1];
                if (val) {
                    this.showTags = arr.splice(0, 12);
                } else {
                    this.showTags = arr;
                }
            },
        },
    },
    computed: {
        ...mapGetters({
            permissions: 'permissions',
        }),
    },
    created() {
        this.dataSubscriptionListFn();
    },
    mounted() {},
    methods: {
        showBtnFn() {
            this.showBtn = !this.showBtn;
        },
        //修改
        modifyFn() {
            this.initData = JSON.parse(JSON.stringify(this.dataSubscription));
            this.dialogVisible = !this.dialogVisible;
        },
        addStaffFn(data) {
            this.showAddStaff = true;
        },
        addStaffCloseFn(data) {
            this.dataSubscription = data;
            this.showAddStaff = false;
        },
        addStaffconfirmFn(data) {
            this.dataSubscription.userIds = data.userIds;
            this.dataSubscription.deptIds = data.deptIds;
            console.log(data);
            this.showAddStaff = false;
        },
        modifyCloseFn() {
            this.dataSubscription = this.initData;
            this.dialogVisible = false;
        },
        modifySaveFn() {
            let data = this.$refs.modifyMsg.dataSubscription;
            let contacts = [],
                rooms = [],
                dailyType = [],
                userIds = [],
                deptIds = [];

            data.customerDataList.map((item) => {
                if (item.checked) {
                    contacts.push(item.id);
                }
            });
            data.customerGroupData.map((item) => {
                if (item.checked) {
                    rooms.push(item.id);
                }
            });
            data.pushTime.map((item) => {
                if (item.checked) {
                    dailyType.push(item.id);
                }
            });
            data.userIds.map((item) => {
                userIds.push(item.id);
            });
            data.deptIds.map((item) => {
                deptIds.push(item.id);
            });
            if (contacts.length === 0) {
                this.$message.error('请选择客户数据');
                return;
            } else if (rooms.length === 0) {
                this.$message.error('请选择客户群数据');
                return;
            } else if (dailyType.length === 0) {
                this.$message.error('请选择推送数据');
                return;
            }

            //修改保存
            let obj = {
                contacts: contacts,
                rooms: rooms,
                dailyType: dailyType,
                userIds,
                deptIds,
                isOrder: data.switch,
            };
            subscribeSave(obj).then((res) => {
                if (res.data.code === 0) {
                    this.staffList = res.data.data.res;
                    this.dataSubscriptionListFn();
                    this.dialogVisible = false;
                    this.$message.success('更新成功');
                }
            });
        },
        //获取数据订阅列表
        dataSubscriptionListFn() {
            let obj = {
                employeeName: this.searchValue,
            };
            dataSubscriptionList(obj).then((res) => {
                if (res.data.code === 0) {
                    let { isOrder, contacts, rooms, dailyType, users, depts } = res.data.data;
                    let arr1 = users.map((i) => {
                        i = {
                            name: i.userName,
                            id: i.userId,
                            treeId: i.userId + i.userName,
                        };
                        return i;
                    });
                    let arr2 = depts.map((i) => {
                        i = {
                            name: i.deptName,
                            id: i.deptId,
                            treeId: i.deptId + i.deptName,
                        };
                        return i;
                    });
                    this.dataSubscription = {
                        switch: isOrder,
                        customerDataList: contacts,
                        customerGroupData: rooms,
                        pushTime: dailyType,
                        userIds: arr1,
                        deptIds: arr2,
                    };
                    let arr = [...arr2, ...arr1];
                    if (arr.length > 12) {
                        this.showTags = arr.splice(0, 12);
                        this.showBtn = true;
                    } else {
                        this.showTags = arr;
                        this.showBtn = false;
                    }
                }
            });
        },
        //数据订阅开关
        dataSubscriptionSwitchFn() {
            let obj = {
                isOrder: this.dataSubscription.switch,
            };
            dataSubscriptionSwitch(obj).then((res) => {
                if (res.data.code === 0) {
                    this.dataSubscriptionListFn();
                } else {
                    this.dataSubscription.switch = !this.dataSubscription.switch;
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.madp-subscription-switch {
    span:nth-child(1) {
        display: inline-block;
        width: 74px;
        text-align: right;
        font-size: 16px;
        font-weight: bold;
        margin-right: 10px;
    }
    .madp-subscription-type {
        margin-left: 10px;
        color: rgba(0, 0, 0, 0.45);
    }
}
.madp-subscription-content {
    position: relative;
    margin-top: 20px;
    min-height: fit-content;

    /deep/.el-tag--medium {
        min-width: fit-content;
        height: 40px;
        line-height: 40px;
        color: #333;
        font-size: 15px;
    }
}
.madp-employees {
    display: flex;
    align-items: center;
    margin-right: 12px;

    .madp-image {
        margin-right: 10px;
        width: 28px;
        height: 28px;
        border-radius: 4px;
    }
}
.madp-display {
    font-size: 15px;
    min-width: fit-content;
    display: flex;
    margin-bottom: 20px;
    p {
        margin-bottom: 20px;
    }
}
.madp-title {
    font-weight: bold;
    margin-right: 20px;
    min-width: fit-content;
}
.madp-receiving-employees {
    margin: 0px 20px 20px 0px;
    width: 22%;
    min-width: fit-content;
}
.madp-msg {
    max-height: 170px;
    overflow: hidden;
}
.madp-msg-more {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.madp-receiving-btn {
    display: flex;
}
.madp-btn {
    text-align: right;
    padding-right: 1rem;
    /deep/ button {
        font-size: 16px;
    }
}
.madp-dialog-footer {
    display: flex;
    justify-content: flex-end;
}
.madp-subscription-switch-img {
    padding-top: 30px;
    padding-bottom: 200px;
    display: flex;
    /deep/ .el-image {
        width: 200px;
        height: 400px;
    }
}
</style>
